<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.development.js"></script>
    <script src="react-dom.development.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
            // 键(Keys) 帮助 React 标识哪个项被修改、添加或者移除了。
            // 数组中的每一个元素都应该有一个唯一不变的键(Keys)来标识
            // 一个好的经验准则是元素中调用 map() 需要 keys 。

            const numbers = [1,2,3,4,5];

            function NumberList(props) {
              const numbers = props.number;
              const listItems = numbers.map((number,index) => <li key={index}>{number}</li>);
              return (<ul>{listItems}</ul>);
            }

            // function NumberList2(props) {
            //   const numbers = props.number;
            //   const listItems = numbers.map((number,index) => <li>{number}</li>);
            //   return (<ul key={index}>{listItems}</ul>);
            // }
            

            ReactDOM.render(
            //   <NumberList2 number={numbers} />,
              <NumberList number={numbers} />,
              document.getElementById('root') 
            )
    </script>
  </body>
</html>